<template>
  <div class="common-layout">
    <el-container>
      <el-header>标题</el-header>
      <el-container>
        <el-aside width="200px">Aside</el-aside>
        <el-main>
          <el-card class="box-card">
            <template #header>
              <div class="card-header">
                <span>info table</span>
                <el-button type="primary" @click="loadData">loadData</el-button>
              </div>
            </template>
            <el-table :data="tableData" style="width: 100%">
              <el-table-column prop="id" label="id" width="180" />
              <el-table-column prop="username" label="username" width="180" />
              <el-table-column prop="password" label="password" />
            </el-table>
          </el-card>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script setup>
import { ref, reactive} from "vue";
import {getAllUser} from "@/api/user";

const tableData =ref([])


const loadData = () => {
  getAllUser().then(res=>{
    tableData.value = res.data.data
  })
}
loadData()
</script>

<style scoped>

</style>